<template>
  <div class="outset">
    <div class="content">
      <div
        v-for="(item, index) in cateList"
        :key="index"
        class="container"
        :class="{ on: currentOn == index }"
        @click="channerHandle(index, item.url)"
      >
        <div class="imgbox">
          <img :src="url + item.image" alt="" />
        </div>
        {{ item.name }}
      </div>
    </div>
    <!-- <div class="goodlist">
      <div v-for="(item, index) in goodsList" :key="index">
          <div >

            <router-link :to="{ path: `/shop/${item.id}` }" class="goods" >

          <div class="left">
            <img :src="item.wap_banner_url" alt="" />
          </div>
          <div class="right">
            <div class="name">
              {{ item.name }}
            </div>
            <div class="desc">
              {{ item.front_name }}
            </div>
          </div>
        </router-link>
          </div>
      </div>
    </div> -->

    <!-- 二级分类 -->
    <div class="second">
      <div class="left">
        <div class="leContent">
          <div
            v-for="(item, index) in secondlist"
            :key="index"
            @click="accept(item.id, index)"
            class="leTitle"
            :class="{ goodson: currentGoods == index }"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <div class="right">
        <div class="goods" v-for="(item, index) in goodsList" :key="index">
          <router-link :to="`/shop/${item.goods_sn}`">
          <div class="info">
            {{ item.name }}
          </div>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: "http://localhost:3000",
      cateList: [],
      currentOn: 6,
      secondlist: [],
      goodsList: [],
      currentGoods: 9,
    };
  },
  methods: {
    async getlist() {
      const { data } = await this.$api.channer();
      if (data.status != 200) {
        alert(data.msg);
      } else {
        this.cateList = data.result;
      }
    },
    /* 点击获取商品 */
    channerHandle(index, item) {
      this.currentOn = index;
      const cc = item.split("=");
      this.$api.secondlist(cc[1]).then((res) => {
        this.secondlist = res.data.data;
        this.goodsList = [];
        this.currentGoods = 9
      });
    },
    /* 发送二级分类ID */
    accept(id, index) {
      this.$api.reqGoods(id).then((result) => {
        const { data } = result;
        this.goodsList = data.data;
        this.currentGoods = index;
        
      });
    },
  },
  mounted() {
    this.getlist();
  },
};
</script>

<style lang="less" scoped>
.outset {
  // height: 100vh-44px;
  .content {
    background-color: rgba(215, 231, 243, 0.8);
    padding: 10px 0;
    color: #ffffff;
    display: flex;
    width: 100%;
    height: 122px;
    text-align: center;

    align-content: center;
    box-sizing: border-box;

    .container {
      flex: 1;
      box-sizing: border-box;
      border-radius: 8px;
      padding-top: 10px;
      background-color: var(--themeColor);
      margin: 0 5px;
      .imgbox {
        width: 100%;

        img {
          width: 58px;
          height: 58px;
        }
      }
    }
    .on {
      border-bottom: 5px solid #e95d5e;
    }
  }

  .second {
    overflow: scroll;
    border: 1px solid #ffffff;
    font-size: 16px;

    display: flex;
    background-color: rgba(215, 231, 243, 0.8);
    height: 260px;

    .left {
      .leContent {
        .leTitle {
          margin: 5px;
          background-color: rgba(230, 242, 245, 0.397);
        }
      }

      box-sizing: border-box;

      flex: 1;
    }
    .right {
      padding: 5px;
      flex: 3;
      overflow: scroll;
    }
  }
  .goodson {
    border-right: 5px solid #e95d5e;
    font-size: 18px;
  }
}

// .goodlist{
//   height: 260px;
//   overflow: scroll;
//   .goods {
//   display: flex;
//   border: solid 1px red;
//   flex-direction: row;

//   flex-wrap: nowrap;

//   .left {
//     width: 100%;
//     flex: 1;
//     img {
//       width: 180px;
//       display: block;
//     }
//   }
//   .right {
//     text-align: center;
//     flex: 1;
//     width: 180px;
//   }
// }
// }
</style>